<template>
  <div class="app-container">
    <div class="info-title">
      <span>风险事件清单详情</span>
      <router-link to="/prevent/risk/risk" class="info-back">
        <el-button type="primary" plain>返回列表</el-button>
      </router-link>
    </div>
    <el-row :gutter="12">
      <!--基本信息-->
      <el-col :span="8">
        <div class="info-header">
          <span>风险事件名称:{{ riskEventInfo.riskEventName }}</span>
        </div>
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">风险评估</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>评估方法:</span><span>{{ riskEventInfo.determineMethodName }}</span>
            </div>
            <div class="info-item">
              <span>控制措施状态:</span
              ><span>{{
                praseParamsShow(
                  riskEventInfo.riskEstimateMethod.measureStatus,
                  "measureStatus"
                )
              }}</span>
            </div>
            <div class="info-item">
              <span>可能性:</span>

              <span
                >{{
                  praseParamsShow(
                    riskEventInfo.riskEstimateMethod.likelihood,
                    "likelihood"
                  )
                }}
              </span>
            </div>
            <div class="info-item">
              <span>暴露率/频次:</span
              ><span>{{
                praseParamsShow(
                  riskEventInfo.riskEstimateMethod.exposureRate,
                  "exposureRate"
                )
              }}</span>
            </div>
            <div class="info-item">
              <span>后果:</span
              ><span>{{
                praseParamsShow(
                  riskEventInfo.riskEstimateMethod.seriousness,
                  "seriousness"
                )
              }}</span>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">其他信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>创建人:</span><span>{{ riskEventInfo.createdBy }}</span>
            </div>
            <div class="info-item">
              <span>创建时间:</span><span>{{ parseTime(riskEventInfo.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span>更新人:</span>
              <span>
                {{ riskEventInfo.updatedBy ? riskEventInfo.updatedBy : "---" }}
              </span>
            </div>
            <div class="info-item">
              <span>更新时间:</span>
              <span>
                {{ riskEventInfo.updatedAt ? parseTime(riskEventInfo.updatedAt) : "---" }}
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">风险辨识</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>风险分析单元:</span><span>{{ riskEventInfo.riskUnitName }}</span>
            </div>
            <div class="info-item">
              <span>风险描述:</span><span>{{ riskEventInfo.riskDescription }}</span>
            </div>
            <div class="info-item">
              <span>可导致的事故类型:</span
              ><span>{{ riskEventInfo.accidentTypeName }}</span>
            </div>
            <div class="info-item">
              <span>风险等级:</span>
              <span>
                {{ riskEventInfo.riskLevelName }}
              </span>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">管控措施</span>
            </div>
          </template>
          <div class="body">
            <el-row
              :gutter="12"
              class="demo-radius"
              v-for="(item, index) in riskEventInfo.riskEventMeasureList"
              :key="index"
            >
              <el-col :span="24">
                <div class="info-item">
                  <span>管控措施类型:</span><span>{{ item.measureClassfyName }}</span>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="info-item">
                  <span>管控措施类容:</span><span>{{ item.riskMeasureDesc }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="RiskInfo">
import { getRiskEvent } from "@/api/prevent/risk/riskEvent";
import { listMethodParams } from "@/api/prevent/risk/params";
const loading = ref(true);
const route = useRoute();
const riskEventInfo = ref({
  riskEstimateMethod: {},
});
const methodParamsOptions = ref([]); //风险评估方法参数
(() => {
  const riskEventId = route.params && route.params.riskEventId;
  if (riskEventId) {
    loading.value = true;
    getRiskEvent(riskEventId).then((response) => {
      riskEventInfo.value = response.data;
      loading.value = false;
    });
  }
})();
getMethodParamsList();
/** 处理风险评估方法数据呈现 */
function praseParamsShow(val, type) {
  //console.log(val);
  if (
    riskEventInfo.value.determineMethodType == 1 ||
    riskEventInfo.value.determineMethodType == "1"
  ) {
    return "---";
  } else if (
    riskEventInfo.value.determineMethodType == 2 ||
    riskEventInfo.value.determineMethodType == "2"
  ) {
    if (type == "likelihood") {
      return getParamsDescription(val, "LEC-L");
    } else if (type == "exposureRate") {
      return getParamsDescription(val, "LEC-E");
    } else if (type == "seriousness") {
      return getParamsDescription(val, "LEC-c");
    } else {
      return "---";
    }
  } else if (
    riskEventInfo.value.determineMethodType == 3 ||
    riskEventInfo.value.determineMethodType == "3"
  ) {
    if (type == "likelihood") {
      return getParamsDescription(val, "LS-L");
    } else if (type == "seriousness") {
      return getParamsDescription(val, "LS-S");
    } else {
      return "---";
    }
  } else if (
    riskEventInfo.value.determineMethodType == 4 ||
    riskEventInfo.value.determineMethodType == "4"
  ) {
    if (type == "likelihood") {
      return getParamsDescription(val, "LC-L");
    } else if (type == "seriousness") {
      return getParamsDescription(val, "LC-C");
    } else {
      return "---";
    }
  } else if (
    riskEventInfo.value.determineMethodType == 5 ||
    riskEventInfo.value.determineMethodType == "5"
  ) {
    if (type == "measureStatus") {
      return getParamsDescription(val, "MES-M");
    } else if (type == "exposureRate") {
      return getParamsDescription(val, "MES-E");
    } else if (type == "seriousness") {
      return getParamsDescription(val, "MES-S");
    } else {
      return "---";
    }
  } else if (
    riskEventInfo.value.determineMethodType == 6 ||
    riskEventInfo.value.determineMethodType == "6"
  ) {
    if (type == "likelihood") {
      return getParamsDescription(val, "JSA-L");
    } else if (type == "exposureRate") {
      return getParamsDescription(val, "JSA-E");
    } else if (type == "seriousness") {
      return getParamsDescription(val, "JSA-S");
    } else {
      return "---";
    }
  } else {
    return "---";
  }
}

/** 获取参数描述 */
function getParamsDescription(val, paramsType) {
  var target = methodParamsOptions.value.filter((item) => {
    return (
      item.methodType == riskEventInfo.value.determineMethodType &&
      item.paramsType == paramsType &&
      item.paramsValue == val
    );
  });
  if (target[0] == undefined) {
    console.log(val, paramsType);
    return "-----";
  }
  return target[0].paramsDescription;
  //return "";
}

/** 获取风险评估方法参数 */
function getMethodParamsList() {
  listMethodParams().then((response) => {
    methodParamsOptions.value = response.data;
  });
}
</script>
<style scoped lang="scss">
.info-title {
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 5px;
  background-color: #f6f8fa;
  color: #2c2c2c;
  margin: -6px 0 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  & .info-back {
    color: #0086ff;
  }
  & span {
    font-weight: 800;
  }
}
.info-header {
  width: 100%;
  height: 116px;
  background: url(./../../../../assets/prevent/total_bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 20px;
  & span:nth-child(1) {
    height: 33px;
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: #fff;
    line-height: 33px;
  }
}
.info-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 42px;
  padding: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #f6f8fa;
  border-radius: 5px;
  &:hover {
    padding: 5px;
    font-size: 16px;
  }
  & span:nth-child(1) {
    font-weight: 800;
    color: #9e9e9e;
  }
  & span:nth-child(2) {
    margin-left: 20px;
    font-size: 14px;
  }
}
.demo-radius {
  width: 90%;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin: 20px;
  padding: 20px;
}
</style>
